<template>
  <n-modal :show="state.dialogFormVisible" @updateShow="showChange">
    <div class="name-auth-dia">
      <div class="nav">
        <div class="title">实名认证</div>
        <div class="close" @click="close">
          <i class="esayIcon esayIcon-guanbi1"></i>
        </div>
      </div>
      <div class="desc">
        根据央行监管规定，您需完成实名认证方能使用趣牛网交易功能
      </div>
      <div class="con">
        <NForm ref="ruleForm" :model="queryForm" show-feedback :rules="rules">
          <n-form-item require-mark-placement="left" label="姓名" path="name">
            <n-input
              v-model:value="queryForm.name"
              placeholder="请输入您身份证上的真实姓名"
            />
          </n-form-item>
          <n-form-item
            require-mark-placement="left"
            label="身份证号"
            path="identityCard"
          >
            <n-input
              v-model:value="queryForm.identityCard"
              placeholder="请输入您的真实身份证号码"
            />
          </n-form-item>
        </NForm>
        <div class="tool flex">
          <n-button class="btn" @click="close">取消</n-button>
          <n-button
            class="btn confirm-btn"
            type="primary"
            :disabled="submitDis"
            @click="handleValidateClick"
          >
            提交认证
          </n-button>
        </div>
      </div>
    </div>
  </n-modal>
</template>
<script setup lang="ts">
import { NButton, NForm, NFormItem, NInput, NModal, useMessage } from 'naive-ui'
import type { FormRules, FormInst } from 'naive-ui'
import { computed, inject, reactive, ref } from 'vue'
import { useAppsStore } from '@/stores/modules/app'
const submitDis = computed(() => {
  return !(!!queryForm.value.name && !!queryForm.value.identityCard)
})
const useStore = useAppsStore()
const $clone = inject('$clone') as <T>(data: T) => T
const toast = useMessage()
const { doUserInfo } = useStore
const queryForm = ref({
  name: '',
  identityCard: ''
})
const rules: FormRules = {
  name: [
    {
      required: true,
      message: '姓名不能为空',
      trigger: 'blur'
    }
  ],
  identityCard: [
    {
      required: true,
      message: '身份证号不能为空',
      trigger: 'blur'
    },
    {
      pattern:
        /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
      message: '身份证号格式不正确',
      trigger: 'blur'
    }
  ]
}
const ruleForm = ref<FormInst | null>(null)
const handleValidateClick = (e: MouseEvent) => {
  e.preventDefault()
  ruleForm.value?.validate((errors: any) => {
    if (!errors) {
      save()
    }
  })
  let requestLoading = false
  const save = async () => {
    if (requestLoading) return
    requestLoading = true
    const params = $clone(queryForm.value)
    console.log(params)
    // const { code, message } = await loginApi.addAuth(params)
    // if (code !== 200) {
    //   requestLoading = false
    //   toast.error(message)
    //   return
    // }
    // requestLoading = false
    toast.success('模拟认证成功')
    doUserInfo()
    close()
  }
}
const state = reactive({
  dialogFormVisible: false
})
const showChange = (e: boolean) => {
  if (!e) {
    close()
  }
}
const close = () => {
  queryForm.value = {
    name: '',
    identityCard: ''
  }
  state.dialogFormVisible = false
}
const open = (row?: any) => {
  if (row) {
    queryForm.value = row
  }
  state.dialogFormVisible = true
}
defineExpose({
  open
})
</script>

<style scoped lang="scss">
.name-auth-dia {
  width: 480px;
  background: #fff;
  border-radius: 15px;
  box-sizing: border-box;
  padding: 24px;
  .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .title {
      font-size: 18px;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      color: #333333;
    }
    .close {
      cursor: pointer;
      i {
        font-size: 24px;
        color: #666666;
      }
    }
  }
  .desc {
    margin-top: 8px;
    font-size: 14px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #999999;
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid #eeeeee;
  }
  .tool {
    margin-top: 20px;
    justify-content: center;
    .btn {
      width: 124px;
      height: 40px;
    }
    .confirm-btn {
      margin-left: 24px;
    }
  }
}
</style>
